<template>
  <view class="i-stepNum">
    <view class="left" @click="onReduce">
      <image src="../../static/images/reduces_icon.png" mode="" />
    </view>
    <view class="Num">{{ modelValue }}</view>
    <view class="left" @click="onAdd">
      <image src="../../static/images/add_num_icon.png" mode="" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from "vue";
import _ from "lodash";

// 建议使用 modelValue 和 update:modelValue 来实现标准 v-model 双向绑定
const props = defineProps({
  modelValue: {
    type: Number,
    default: 0,
  },
});

const emit = defineEmits(["update:modelValue", "change"]);

// 定义增加和减少的具体逻辑
const decrease = () => {
  if (props.modelValue <= 1) return;
  emit("update:modelValue", props.modelValue - 1);
  // 可选：emit("change", "reduces")
};

const increase = () => {
  emit("update:modelValue", props.modelValue + 1);
  // 可选：emit("change", "add")
};

// 用 lodash 的 debounce 包裹函数
const onReduce = _.debounce(decrease, 200, { leading: true, trailing: false });
const onAdd = _.debounce(increase, 200, { leading: true, trailing: false });
</script>

<style lang="scss" scoped>
.i-stepNum {
  @include flexRS;

  .Num {
    width: 100rpx;
    @include titlefont(26rpx);
    padding: 6rpx 0;
    @include flexRC;
    background: $background-color;
    border-radius: 4rpx;
    margin: 0 12rpx;
  }
  .left {
    width: 48rpx;
    height: 48rpx;
  }
  .left:active {
    transform: scale(0.8);
    transition: all 0.15s ease-out;
  }
  image {
    width: 48rpx;
    height: 48rpx;
  }
}
</style>
